<template>
  <div>
    <el-container>
      <el-header class="el-header1">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
          <el-breadcrumb-item :to="{ path: '/' }">
            <i class="el-icon-s-promotion"></i> 首页
          </el-breadcrumb-item>
          <el-breadcrumb-item>规则列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <el-form :inline="true" :model="ruleQuery" ref="userQuery" class="demo-form-inline"
                 v-show="showEachState">
          <el-form-item label="规则名称">
            <el-input v-model="ruleQuery.name" placeholder="规则名称" style="width: 224px"></el-input>
          </el-form-item>
          <el-form-item label="规则状态">
            <el-select v-model="ruleQuery.status" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 1%">
            <el-button type="primary" @click="loadRuleList">查询</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row style="margin-bottom: 10px">
          <el-button type="primary" plain size="mini" @click="activityRuleAddNew">新增规则</el-button>
          <el-button type="danger" plain size="mini">导出数据</el-button>
          <el-button icon="el-icon-refresh" circle size="mini" style="float: right"
                     @click="loadRuleList"></el-button>
          <el-button icon="el-icon-search" circle size="mini" style="float: right"
                     @click="showEach"></el-button>
        </el-row>
        <el-table
            :data="ruleList"
            border
            style="width: 100%">
          <el-table-column
              prop="id"
              label="ID"
              width="60"
              align="center">
          </el-table-column>
          <el-table-column
              prop="name"
              label="规则名称"
              width="120"
              align="center">
          </el-table-column>
          <el-table-column
              prop="type"
              label="规则类型"
              width="100"
              align="center">
            <template slot-scope="scope">
              <el-tag size="small">
                <span v-if="scope.row.type==1">抽奖次数</span>
                <span v-if="scope.row.type==2">中奖概率</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="description"
              label="规则简介"
              align="center">
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="创建时间"
              width="220"
              align="center">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态"
              width="80"
              align="center">
            <template slot-scope="scope">
              <p v-if="scope.row.status==0">禁用</p>
              <p v-if="scope.row.status==1">启用</p>
            </template>
          </el-table-column>

          <el-table-column
              label="操作"
              width="100"
              align="center">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" circle
                         @click="handleEdit(scope.row.id)" style="margin-right: 10px "></el-button>
              <el-popconfirm
                  title="确定删除奖品吗？" @confirm="handleDelete(scope.row.id)">
                <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"
                           circle></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

  </div>
</template>
<script>

import axios from "axios";

export default {
  data() {
    return {
      ruleList: [],
      ruleQuery: {
        name: null,
        status: null,
      },
      showEachState: true,
      options: [{
        value: 0,
        label: '禁用'
      }, {
        value: 1,
        label: '启用'
      }],
      formLabelWidth: '120px',
    }
  },
  methods: {
    activityRuleAddNew() {
      this.$router.push("/home/activity-rule-add-new")
    },

    handleDelete(id) {

    },
    loadRuleList() {
      console.log(this.activityQuery)
      axios.post("http://localhost:9090/draw/rule/findAll", this.ruleQuery, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(
          response => {
            console.log(response)
            this.ruleList = response.data.data;
          }
      )

    },
    resetForm() {
      this.ruleQuery.name = null;
      this.ruleQuery.status = null;
      this.loadRuleList()
    },
    showEach() {
      if (this.showEachState == true) {
        this.showEachState = false;
      } else {
        this.showEachState = true;
      }
      this.loadRuleList()
    }
  },
  created() {
    this.loadRuleList()
  }
}
</script>
<style>

.el-header1 {
  color: #333;
  text-align: center;
  height: 30px !important;
}

.footer {
  text-align: center;
  height: 30px !important;
}
</style>